import { deleteContact, listContact } from '@/services/api/contact';
import { Button } from "antd";
import { useRef, useState } from 'react';
import { convertPageData } from '@/utils/request';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { openConfirm } from '@/utils/ui';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import InputDialog from './InputDialog';
/*
 * @Author: 于欣汝1 12613083+yu-xinru-1@user.noreply.gitee.com
 * @Date: 2023-03-16 23:30:45
 * @LastEditors: 于欣汝1 12613083+yu-xinru-1@user.noreply.gitee.com
 * @LastEditTime: 2023-04-01 15:10:09
 * @FilePath: \web-frontend\src\pages\base\contact\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
export default () => {
  const refAction = useRef<ActionType>(null);
  const [selectedRowKeys, selectRow] = useState<number[]>([]);
  const [contact, setContact] = useState<API.ContactVO>();
  const [visible, setVisible] = useState(false);
  const columns: ProColumns<API.ContactVO>[] = [
    {
      title: '部门ID',
      dataIndex: 'id',
      width: 100,
      search: false,
    },
    {
      title: '联系人',
      dataIndex: 'contact',
      width: 100,
      render: (dom, record) => {
        return (
          <a
            onClick={() => {
              setContact(record);
              setVisible(true);}}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: '部门名称',
      dataIndex: 'departmentName',
      width: 100,
      render: (dom, record) => {
        return (
          <a
            onClick={() => {
              setContact(record);
              setVisible(true);}}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: '联系电话',
      dataIndex: 'contactPhone',
      width: 100,
      render: (dom, record) => {
        return (
          <a
            onClick={() => {
              setContact(record);
              setVisible(true);}}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: '省份',
      dataIndex: 'province',
      width: 100,
      render: (dom, record) => {
        return (
          <a
            onClick={() => {
              setContact(record);
              setVisible(true);}}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: '详细地址',
      dataIndex: 'address',
      width: 150,
      render: (dom, record) => {
        return (
          <a
            onClick={() => {
              setContact(record);
              setVisible(true);}}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width: 150,
      render: (dom, record) => {
        return (
          <a
            onClick={() => {
              setContact(record);
              setVisible(true);}}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: '创建人',
      dataIndex: 'createdByDesc',
      width: 100,
      search: false,
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      width: 150,
      search: false,
    },
  ];
  const handleDelete = async () => {
    if (!selectedRowKeys?.length) return;
    openConfirm(`您确定删除${selectedRowKeys.length}条记录吗`, async () => {
      await deleteContact(selectedRowKeys);
      refAction.current?.reload();
    });
  };
  return(
  <PageContainer>
    <ProTable<API.ContactVO>
      actionRef={refAction}
      rowKey="id"
      request={async (params = {}) => {
        return convertPageData(await listContact(params));
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setContact(undefined);
            setVisible(true);
          }}
        >
           <PlusOutlined /> 新建
        </Button>,
        <Button
          type="primary"
          key="primary"
          danger
          onClick={handleDelete}
          disabled={!selectedRowKeys?.length}
        >
        <DeleteOutlined /> 删除
        </Button>,
      ]}
      columns={columns}
      rowSelection={{
        onChange: (rowKeys) => {
          selectRow(rowKeys as number[]);
        },
      }}
    />
    <InputDialog
        detailData={contact}
        onClose={(result) => {
          setVisible(false);
          result && refAction.current?.reload();
        }}
        visible={visible}
      />
  </PageContainer>
 ) ;
};